<template>
  <el-row :gutter="20">
    <el-col :sm="3" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="18">
      <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
        <div slot="header" class="total blog-info">
          <div class="user-info">
            <i class="el-icon-user"></i>
            <span class="header">  {{ blog.createBy }}</span>
          </div>
          <div class="blog-date">
            <i class="el-icon-date"></i>
            <span>  {{ blog.createTime }}</span>
          </div>
          <div class="blog-views">
            <i class="el-icon-view"></i>
            <span>  {{ blog.views }}</span>
          </div>
        </div>
        <h2 class="blog-title header">{{ blog.title }}
          <el-tag size="mini" v-for="tag in blog.types" :key="tag.typeId" type="info">{{ tag.typeName }}</el-tag>
        </h2>
        <div v-if="blog.contentType === '1'"
             class="typo m-padded-lr-responsive m-padded-tb-large ql-editor"
             v-html="blog.content"></div>
        <div v-if="blog.contentType === '3'"
             v-html="blog.content"></div>
        <CherryMarkdown ref="CherryMarkdown" v-if="blog.contentType === '2'" v-model='blog.contentMarkdown' :defaultModel="'previewOnly'"></CherryMarkdown>
        <div class="tags">
          <div class="tag-item" v-for="tag in blog.tags" :key="tag.tagId">
            <div class="sjx-outer">
              <div class="sjx-inner"></div>
            </div>
            <div class="tag">
              {{ tag.tagName }}
            </div>
          </div>
        </div>
        <el-table :data="blog.blogFilesNew" :border="true" style="width: 99.99%;">
          <el-table-column align="center" min-width="30%" prop="remark" label="附件">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="6"><div class="blogFilesInfoName">名称：</div></el-col>
                <el-col :span="18"><el-input v-model="scope.row.fileOriginName" disabled/></el-col>
              </el-row>
              <el-row style="margin-top: 4px;">
                <el-col :span="6"><div class="blogFilesInfoName">大小：</div></el-col>
                <el-col :span="18"><el-input v-model="scope.row.fileSize" disabled/></el-col>
              </el-row>
              <el-row style="margin-top: 4px;">
                <el-col :span="6"><div class="blogFilesInfoName">类型：</div></el-col>
                <el-col :span="18"><el-input v-model="scope.row.fileSuffix" disabled/></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="50%" prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" type="textarea" :rows="6" size="small" disabled />
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="20%" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" plain @click="handleDownload(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="author">
          <ul>
            <li>作者 {{ blog.createBy }}</li>
            <li>发表时间 {{ blog.createTime }}</li>
          </ul>
        </div>
        <el-card shadow="never" class="comments">
          <div class="header" style="padding-bottom: 10px;">
            评论
          </div>
          <comment></comment>
        </el-card>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="0"></el-col>
    <el-col :sm="3" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    <!-- 设置底部距离的 -->
    <el-backtop :bottom="60">
      <div
          style="{
          height: 50px;
          width: 50px;
          background-color: rgba(240,239,241,1);
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          border-radius:2px;
          color: #1989fa;
        }"
      >
        <svg-icon icon-class="top" />
      </div>
    </el-backtop>
  </el-row>
</template>

<script setup>
import {
  reactive,
  defineProps,
  withModifiers,
  withDirectives,
  vShow,
  onBeforeMount,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  cmsListComment,
  cmsAddComment
} from "@/api/cms/comment";
import {
  getBlogDetail,
  //addBlogViews,
} from "@/api/cms/blog";
import comment from './comment/Ipcomment';
import {ElMessage} from "element-plus";

const { comments } = defineProps(['comments']);

// State
const blog = reactive({}); // Using reactive to store the blog data
const commentForm = ref({ content: '' });
const messageList = ref([]);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  parentId: null,
  mainId: null,
  likeNum: null,
  content: null,
  type: null,
  blogId: '',
  userId: null,
  delFlag: null,
  createBy: null,
});
const messageForm = reactive({
  id: null,
  parentId: null,
  mainId: null,
  likeNum: null,
  content: null,
  type: null,
  blogId: '',
  userId: null,
  delFlag: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
});
const messageFormRef = ref(null);
const cursorIndexStart = ref(null);
const cursorIndexEnd = ref(null);

// Router and Route
const route = useRoute();
const router = useRouter();

onBeforeMount(() => {
  getBlogInformation();
});

// Methods
async function getBlogInformation() {

  const { data: res } = await getBlogDetail(route.query.id);
  blog.title = res.title;
  blog.createBy = res.createBy;
  blog.createTime = res.createTime;
  blog.views = res.views;
  blog.contentType = res.contentType;
  blog.content = res.content;
  blog.contentMarkdown = res.contentMarkdown;
  blog.types = res.types;
  blog.tags = res.tags;
  blog.blogFilesNew = res.blogFiles ? JSON.parse(res.blogFiles) : [];

}

async function publish() {
  let token = getToken();
  await messageFormRef.value.validate(async valid => {
    if (!valid) return;
    if (messageForm.content == null || messageForm.content === '') {
      ElMessage.error('内容不能为空！');
      // Your custom modal or Element Plus modal here for error messages
      return;
    }
    if (token == null || token === '') {
      messageForm.createBy = "匿名用户";
      messageForm.type = '0';
    } else {
      messageForm.createBy = blog.createBy; // Replace with your logic to get the author's name
      messageForm.type = '0';
    }
    await cmsAddComment(messageForm);
    // Your custom modal or Element Plus modal here for success messages
    reset();
    getMessageList();
  });
}

async function commitComment(value) {
  reset();
  messageForm.content = value.inputComment;
  messageForm.parentId = value.id;
  let token = getToken();
  await messageFormRef.value.validate(async valid => {
    if (!valid) return;
    if (messageForm.content == null || messageForm.content === '') {
      ElMessage.error('内容不能为空！');
      // Your custom modal or Element Plus modal here for error messages
      return;
    }
    if (token == null || token === '') {
      messageForm.createBy = "匿名用户";
      messageForm.type = '1';
    } else {
      messageForm.createBy = blog.createBy; // Replace with your logic to get the author's name
      messageForm.type = '1';
    }
    await cmsAddComment(messageForm);
    // Your custom modal or Element Plus modal here for success messages
    reset();
    getMessageList();
  });
}

async function getMessageList() {
  let token = getToken();
  if (token != null && token !== '') {
    queryParams.createBy = blog.createBy; // Replace with your logic to get the author's name
  }
  const response = await cmsListComment(queryParams);
  // ... (remaining code for handling the response)
  messageList.value = response.data;
  total.value = response.total;
}

function blur(e) {
  cursorIndexStart.value = e.srcElement.selectionStart;
  cursorIndexEnd.value = e.srcElement.selectionEnd;
  // ... (remaining code for the blur function)
}

function output(val) {
  if (cursorIndexStart.value !== null && messageForm.content) {
    messageForm.content =
        messageForm.content.substring(0, cursorIndexStart.value) +
        val +
        messageForm.content.substring(cursorIndexEnd.value);
  } else {
    messageForm.content = messageForm.content ? messageForm.content : '' + val;
  }
  // ... (remaining code for the output function)
}

function to() {
  if (route.value.query.commentId != null) {
    const commentId = route.value.query.commentId;
    const toEl = document.getElementById(commentId);
    if (toEl) {
      // Scroll to the element using smooth behavior
      toEl.scrollIntoView({ behavior: 'smooth' });
    }
  }
  // ... (remaining code for the to function)
}

// Replace this function with your getToken logic
function getToken() {
  const token = localStorage.getItem('accessToken');
  return token || null;

}
</script>



<style scoped>

.el-card {
  width: 100%;
}


.el-popper :deep(.box-shadow) {
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12);
}

.first-card {
  border-radius: 10px 10px 10px 10px;
  position: relative;
  padding-bottom: 10px;
  /*text-align: center;*/
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

}

hr.style-one {
  width: 100%;
  background-image: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.75), rgba(64, 158, 255, 0));
}

.appreciate {
  text-align: center;
}

.tags {
  display: flex;
  align-items: center;
  margin-left: 50px;
  margin-top: 20px;
}

.tag-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 20px;
}

.tag {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  color: #409eff;
  display: flex;
}

.sjx-outer {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #409eff;
  position: relative;
}

.sjx-inner {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #ecf5ff;
  top: -7px;
  left: 1px;
  position: absolute;
}

.author {
  text-align: left;
  background-color: #fcfff5;
  box-shadow: 0 0 0 1px #a3c293 inset;
  color: #2c662d;
  width: 100%;
  position: absolute;
  left: 0;
  margin: 20px 0;
  padding: 20px 0;
  font-size: small;
  font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

.comments {
  margin-top: 150px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  border: 1px solid rgba(34, 36, 38, .15);
  border-top: 2px solid #409EFF;
  text-align: left;
}
.blog-title {
  text-align: center;
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .4);
  font-size: 13px;
}
.blog-date {
  margin-right: 5px;
  float: right;
}

.blog-views {
  margin-right: 5px;
  float: right;
}

.user-info {
  justify-content: space-around;
  align-items: center;
  margin-right: 15px;
  float: left;
}

.header {
  text-decoration: none;
  color: #3a8ee6;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .tags {
    margin-left: 0;
    margin-top: 20px;
  }

  hr {
    display: none;
  }

  .comment-content {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 480px) {
  h2 {
    font-weight: normal;
  }

  code, pre {
    font-size: 13px !important;
  }
}
.blogFilesInfoName {
  text-align: center;
  padding-top: 5px;
}
</style>
